<!DOCTYPE html>
<html>

<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <link rel="stylesheet" href="css/tagGroupBy.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        $(function () {
            //获取3条每周推荐
            $.get('/travels/commends', {type: 1, pageSize: 3}, function (data) {
                $('#travelsCommends').renderValues(data, {
                    'getAddress': function (item, value) {
                        var add = $(item).data('href');
                        $(item).attr('href', add + value);
                    }
                });
                //为第一个item设置active
                $(".carousel-item:first").addClass("active");
            });
            //骡窝日报大图显示(一条)
            $.get('/news', {state: 0, pageSize: 1}, function (data) {
                $('#bigger').renderValues(data.list[0], {
                    'getAddress': function (item, value) {
                        var add = $(item).data('href');
                        $(item).attr('href', add + value);
                    }
                });
            });
            //当前页的input框
            var currentInput = $('#currentPage');

            //用于存储日报(大图)的数组容器
            var newsArr = [];
            //总页数
            var pages = 1;

            //获取我的游记数据
            function query() {

                //获取当前页的值
                var currentPage = currentInput.val();//1

                //骡窝日报小图显示
                $.get('/news', {currentPage: currentPage, state: 1, pageSize: 3}, function (data) {
                    $.merge(newsArr, data.list);
                    var json1 = {list: newsArr}//将数组封装成一个json对象,属性名为loop渲染指定的list
                    //重新渲染数据
                    $('#smaller').renderValues(json1, {
                        'getAddress': function (item, value) {
                            var add = $(item).data('href');
                            $(item).attr('href', add + value);
                        }
                    });

                    //从pageInfo中获取总页数,并设置
                    pages = data.pages;
                });

                //当前页input框+1维护,不能用函数内的变量
                currentInput.val(parseInt(currentPage) + 1);//字符串记得转成数字
            }

            //默认查询第一页的数据
            query();

            //当页面滚动条变化时,执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    //获取当前页
                    var currentPage = currentInput.val();
                    //判断是否大于最后一页
                    if (currentPage <= pages) {
                        query();
                    } else {//最后一页,提示
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });

            //头条点评轮播图
            $.get("/strategycomment/commend", function (data) {
                if (data.success) {
                    $(".mytarget").renderValues(data, {
                        getHref: function (item, value) {
                            var href = $(item).data("href");
                            $(item).attr('href', href + value);
                        }
                    })
                }
                showComments();
            })
        })

        //搜索功能实现
        function search(){
            //按下的是回车键
            if(event.keyCode==13){
                var keyword = $("#search").val();
                if(keyword){
                    //拿到关键字,ajax查询数据
                    $.get("/search/searchByKeyWord",{keyword:keyword},function (data) {
                        if(data.success){
                            window.parent.location.href="/resultPage.html?keyword="+keyword;
                        }else {
                            $(document).dialog({
                                autoClose: 2500,
                                content: '暂无搜索结果,请更换精确关键字',
                            });
                        }
                    })
                }
            }
        }



        function showComments() {
            var Mar = document.getElementsByClassName("Marquee")[0];
            var child_div = Mar.getElementsByTagName("div");
            var picH = 50;//移动高度
            var scrollstep = 3;//移动步幅,越大越快
            var scrolltime = 20;//移动频度(毫秒)越大越慢
            var stoptime = 3000;//间断时间(毫秒)
            var tmpH = 0;
            Mar.innerHTML += Mar.innerHTML;

            function start() {
                if (tmpH < picH) {
                    tmpH += scrollstep;
                    if (tmpH > picH) tmpH = picH;
                    Mar.scrollTop = tmpH;
                    setTimeout(start, scrolltime);
                } else {
                    tmpH = 0;
                    Mar.appendChild(child_div[0]);
                    Mar.scrollTop = 0;
                    setTimeout(start, stoptime);
                }
            }

            setTimeout(start, stoptime)
        }
    </script>


</head>


<body>

<div class="body">
    <input type="checkbox" id="menu">

    <label for="menu" class="menu">
        <span><i class="fa fa-user fa-fw fa-2x"></i></span>
        <span><i class="fa fa-chevron-left fa-fw fa-2x" style="color: #3E3C3B"></i></span>
    </label>

    <!-- 侧边栏 -->
    <div class="nav">
        <iframe id="ipage" src="/mine/simpleProfiles.html" frameborder="0" width="90%"></iframe>
    </div>

    <div class="search-head">
        <div class="row nav-search">
            <div class="col-2"></div>
            <div class="col-10">
                <div class="input-group-sm search">
                    <input class="form-control searchBtn" id="search" onkeydown="search()" placeholder="搜索旅行攻略、游记">
                </div>
            </div>
        </div>
    </div>

	<div class="container">
		<h6 class="module-title">每周推荐</h6>
		<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			<div id="travelsCommends">
				<div class="carousel-inner" render-loop="list">
					<div class="carousel-item">
						<a data-href="travelContent.html?id=" render-key="list.travel_id" render-fun="getAddress">
							<img class="d-block w-100"  render-src="list.coverUrl" width="100%" height="200px">
							<span class="recommend" render-html="list.title"></span></a>
						<div class="recommend-author">
							<p>
								<a data-href="userProfiles.html?id=" render-key="list.u_id" render-fun="getAddress">
								<img  class="rounded-circle" style="width: 10%;" render-src="list.u_headImgUrl">
								<span render-html="list.u_nickName"></span>
								</a>在&nbsp;
								<span render-html="list.r_name"></span>
							</p>
						</div>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only"></span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only"></span>
			</a>
		</div>
		<hr>
        <div class="gongneng" style="background: #f8f9fa">
            <ul class="gongneng-list">
                <li class="item"><a href="strategyPage.html"><div class="img zhaogonglue"></div><p style="color: #ff9d00">找攻略</p></a></li>
                <li class="item"><a href="travelPage.html"><div class="img kanyouji"></div><p style="color: #feca2b">看游记</p></a></li>
                <li class="item"><a href="question.html"><div class="img wendaren"></div><p style="color: #42d6ba">问达人</p></a></li>
                <li class="item"><a href="travelHotel.html"><div class="img jiudian"></div><p style="color: #32a2f1">找酒店</p></a></li>
            </ul>

        </div>
        <div class="row dynamic " id="comments">
            <div class="col-1" style="padding: 0px;">
                <img class="rounded" src="/img/topComment.png" style="width: 50px;">
            </div>

            <div class="col mytarget">
                <div class="Marquee" render-loop="result">
                    <div class="d-flex">
                        <a data-href="userProfiles.html?id=" render-key="result.user.id" render-fun="getHref">
                            <img class="rounded-circle dynamic-head"
                                 render-src="result.user.headImgUrl">
                        </a>
                        <a data-href="mine/strategyComment.html?strategycommentId=" class="dynamic-detail" render-key="result.id" render-fun="getHref">
                            <span render-html="result.user.nickName"></span> 点评了攻略<p render-html="result.strategy.title"></p>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <hr>
    <input type="hidden" name="currentPage" id="currentPage" value="1"/>

    <div class="container">
        <h6 class="module-title">骡窝日报 <a href="newsPage.html">更多</a></h6>
            <div class="news" id="bigger" >
                <a data-href="newsContent.html?newsId=" render-key="id" render-fun="getAddress">
                    <img width="100%" render-src="coverUrl">
                    <div class="caption">
                        <h5 render-html="title"></h5>
                        <p render-html="subtitle">
                        </p>

                    </div>
                </a>
            </div>
        <hr>
        <div id="smaller">
            <div render-loop="list">
                <div style="margin-bottom: 20px">
                    <a data-href="newsContent.html?newsId=" render-key="list.id" render-fun="getAddress">
                        <div class="row news-detail">
                            <div class="col-5">
                                <img render-src="list.coverUrl">
                            </div>
                            <div class="col-7">
                                <h4 render-html="list.title"></h4>
                                <p render-html="list.subtitle"></p>
                                <p render-html="list.commendTime"></p>
                            </div>
                        </div>
                    </a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

</html>